<template>
  <el-card>
     <el-row :gutter="24">
      <el-col :span="12">
        <!-- 绑定名称查询  绑定失败则输入不进去-->
        <el-input
          clearable
          @clear="listPage"
          v-model="selectGoodsName"
          placeholder="请输入商品名称查询"
          class="selectInput"
        ></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" icon="el-icon-search" @click="setListPage"
          >查询</el-button
        >
        <!-- <el-button type="success" icon="el-icon-plus" @click="openAddDialog"
          >添加</el-button
        > -->
      </el-col>
    </el-row>
    <el-table :data="tableData">
    
      <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
      <el-table-column prop="id" label="订单号"> </el-table-column>

      <el-table-column prop="date" label="购买日期"> </el-table-column>
         <el-table-column prop="goodsPrice" label="买入金额"> </el-table-column>
      <el-table-column prop="profit" label="总获利"> </el-table-column>
      <!-- 选购为一个按钮点击 添加数量，所购数量会在user页面显示 -->
      <el-table-column prop="quantity" label="出售">
            <template slot-scope="scope">
          <el-tooltip content="出售" placement="right">
            <el-button
              type="danger"
              circle
              icon="el-icon-sell"
              @click="openConfirmDialog(scope.row)"
            ></el-button>
          </el-tooltip>

        </template>

         </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pager.page"
      :page-size="pager.size"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
    ></el-pagination>
      <el-dialog :visible="confirmFlag" title="出售成功" class="openDialog" @close="confirmFlag=false">
       <el-form>
        <el-form-item>

            总收益： {{solding}}

        </el-form-item>
        
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmFlag = false">确定</el-button>
        <!-- <el-button type="primary" @click="save">确 定</el-button> -->
      </div>
    </el-dialog>
    
  </el-card>
</template>

<script>

import Cookies from 'js-cookie'
export default {


  data() {
    return {
      confirmFlag : false,
      tableData: [
        {goodsName: 'aaa'}
      ],selectGoodsName:"",
      // 分页的数据
      pager: {
        currentPage: 1, //从第一条开始分页
        size: 5, //每页显示的数据
        total: 0,
      },
      goodsDTO: {
        id: 0,
        goodsName: "",
        goodsRate: "",
        goodsPrice: "",
        profit:"",
      },
      orderDTO: {
        name:"",
        goodsName: "",
        id:"",
        createTime:"",
        profit:""

      },
      user: {
        username:"",
      },
 solding: 5,
      cardNumber: 0,
      cardDTO:{
          token:"",
          cardNumber: 0
      },
    };
  },
    created() {
    this.listPage();
    this.getUsername();
    this.setToken();
  },
  methods: {
       setToken(){
      this.cardDTO.token = Cookies.get('token')
    },
    handleCurrentChange(val) {
      console.info("改变分页起始数据" + val);
      this.pager.currentPage = val;
      this.listPage();
    },
    handleSizeChange(val) {
      console.info("改变每页显示的最大条数" + val);
      this.pager.size = val;
      this.listPage();
    },
    getUsername(){
      this.user.username = Cookies.get('username')
    },
    //  openConfirmDialog() {
       
    //       this.confirmFlag = !this.confirmFlag;
    //       this.orderDTO = row;
    //     console.log(this.orderDTO.profit)
      
   
    // },
    openConfirmDialog(row) {
     this.confirmFlag= !this.confirmFlag
  this.orderDTO=row
  this.setToken();
  // console.log(this.orderDTO)
   this.solding=this.orderDTO.profit
          this.$http.post("http://127.0.0.1:8001/order/sellProducts", {
          params: {token:this.cardDTO.token
          ,id:this.orderDTO.id

          }
           
        },)
        .then((res) => {
          // console.info(res);

          this.tableData = res.data.data.orders;
          this.pager.total = res.data.data.total;
         
        })
  ;
        setTimeout(() => {
          this.listPage();
        }, 300);
    },
     setListPage() {
       this.orderDTO.name=this.selectGoodsName
       console.log(this.orderDTO.name)
         console.log(this.selectGoodsName)
       this.setToken();
      this.$http
        .post("http://127.0.0.1:8001/order/queryOorderByName", {
          currentPage: this.pager.currentPage,
            size: this.pager.size,
          name:this.selectGoodsName,
         token:this.cardDTO.token
        })
        .then((res) => {
          console.info(res);

          this.tableData = res.data.data.orders;
          this.pager.total = res.data.data.total;
        });
      // console.log(this.tableData);
    },
    listPage() {
       this.setToken();
      this.$http
        .post("http://127.0.0.1:8001/order/queryOrderByUserId", {
          params: {
            token: this.cardDTO.token,
            currentPage: this.pager.currentPage,
            size: this.pager.size,
            username: this.username,
          },
        })
        .then((res) => {
          console.info(res);

          this.tableData = res.data.data.orders;
          this.pager.total = res.data.data.total;
        });
      // console.log(this.tableData);
    },
  },

}
</script>

<style scoped>
.el-table-column {
  width: 20%;
}
.el-card {
  width: 100%;
}
.openDialog {
  margin-left: 25%;
  width: 50%;
}

</style>